<template>
	<view >
		<tui-skeleton v-if="skeletonShow" ></tui-skeleton>
		<view class="tui-skeleton main">
			<view class="tui-skeleton-rect tui-banner-swiper">
			 <swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false" autoplay :interval="4000"
			  :duration="150">
			 	<block v-for="(item,index) in advertise" :key="index">
			 		<swiper-item>
			 			<image :src="item.imgSrc" style="width: 100%;height: 100%"></image>
			 		</swiper-item>
			 	</block>
			 </swiper>
			 <tui-swiper-dot :type="1" :count="count" :current="current"></tui-swiper-dot>
			</view>
			<view class="tui-skeleton-rect com-grid">
				<tui-grid>
					<block v-for="(item,index) in gridList" :key="index" >
						<tui-grid-item :cell="4" @click="publish(item.name)">
							<view class="tui-grid-icon" >
								<!-- <tui-icon :name="item.icon" :size="item.size"></tui-icon> -->
								<img :src="`/static/img/community/${item.icon}.png`" style="width: 80%;height: 80%;"></img>
							</view>
							<text class="tui-grid-label">{{item.name}}</text>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
			<!-- 滚动消息 -->
			<view class="tui-skeleton-rect tui-notice-rolling-news">
				<tui-icon name="news-fill" :size='28' color='#5677fc'></tui-icon>
				<swiper vertical autoplay circular interval="3000" class="tui-notice-swiper">
					<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-notice-swiper-item">
						<view  @tap='detail'>{{item}}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 最新发布 -->
			<view class="tui-skeleton-rect new-order">
				<tui-section title="最新发布" is-line background="#fff"></tui-section>
				<view class="new-order-item ">
					<Orders v-if="!skeletonShow" :data="orderData"></Orders>
				</view>
			</view>
			<tui-toast ref="toast"></tui-toast>
		</view>
	</view>
</template>

<script>
import Orders from './orders/orders.vue'
import { gridList } from './index.js';

export default {
	components: {
		Orders
	},
	data() {
		return {
			skeletonShow: true,
			background: ['tui-bg__primary', 'tui-bg__green', 'tui-bg__white'],
			current: 0,
			count: 0,
			newsList: [
				"致力发展负责任的人工智能 中国发布八大治理原则",
				"格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气",
				"阿里计划将每股普通股拆为8股，增加筹资灵活性"
			],
			advertise: [
				{id: 0, imgSrc: "https://img1.baidu.com/it/u=2901729167,2131105436&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=500"},
				{id: 1, imgSrc: "https://5b0988e595225.cdn.sohucs.com/images/20190805/ca460a916fdf4c4693350026290bb253.jpeg"},
				{id: 2, imgSrc: "https://img0.baidu.com/it/u=256824841,1054943611&fm=253&fmt=auto&app=138&f=JPEG?w=1187&h=658"}
			],
			gridList: gridList,
			searchForm: {
				reqType: '',
				pageNumber: 1, // 当前页数
			    pageSize: 6, // 页面大小
			},
			pages: 0,
			orderData: []
		};
	},
	onShow(){
		
	},
	onLoad() {
		this.checkReLogin();
		this.count = this.background.length;
		let _this = this;
		this.getData().then(res => {
			_this.skeletonShow = false;
			console.log(res.records)
			_this.orderData = res.records;
			_this.pages = res.pages;
			
		});
	},
	onPullDownRefresh() {
		if(this.checkReLogin()) return;
		let _this = this;
		_this.searchForm.pageNumber = 1;
		_this.getData(_this.searchForm).then(res => {
			_this.orderData = res.records;
			_this.pages = res.pages;
			uni.stopPullDownRefresh();
		})
	},
	onReachBottom() {
		let _this = this;
		_this.searchForm.pageNumber++;
		if (_this.searchForm.pageNumber> _this.pages) {
			uni.hideNavigationBarLoading();
			
		} else {
			_this.getData().then(res => {
				_this.orderData = _this.orderData.concat(res.records);
				uni.hideNavigationBarLoading();
			});
		}
	},
	methods: {
		checkReLogin(){
			let flag = false;
			let userInfo = uni.getStorageSync("user_info");
			if(userInfo == null || userInfo == '' || userInfo.mobile == '' || userInfo.mobile == null){
				uni.switchTab({
					url: '/pages/my/index'
				})
				flag = true;
			}
			return flag;
		},
		bannerChange(e){
			this.current = e.detail.current;
		},
		detail(e){
			console.log('详情~')
		},
		publish(name){
			if(this.checkReLogin()) return;
			if(name == '敬请期待'){
				let params = {
					title: "敬请期待",
					icon: false
				}
				this.$refs.toast && this.$refs.toast.show(params);
				return;
			}
			uni.navigateTo({
				url:'/pages/community/publish/publish?name=' + name
			})
		},
		initData(){
			let _this = this;
			_this.searchForm.pageNumber = 1;
			_this.getData(_this.searchForm).then(res => {
				_this.orderData = res.records;
				_this.pages = res.pages;
			})
		},
		getData(){
			let _this = this;
			return new Promise((resovle,reject) => {
				_this.$api.getCumOrderList(this.searchForm).then(res => {
					resovle(res.result)
				}).catch(err => {
					reject(err);
				})
			})
		},
		setLatestOrder(order){
			this.orderData.unshift(order);
		}
	}
};
</script>

<style lang="scss">
	@import './index.css';

</style>
